<template>
  <el-dialog
      :title="mode === 'add'? '添加画像信息':'编辑画像信息'"
      :visible.sync="visible"
      :close-on-click-modal="false"
      @close="closeForm('')"
      width="840px"
      class="group_dialog"
      destroy-on-close
  >
    <el-form :model="form" :rules="rules" label-width="96px" class="groupForm" ref="drawerForm">
      <div class="title">选择画像信息类型</div>
      <div class="info-type-box">
        <div @click="form.portraitInfoType = '标签属性分布'" :class="['info-type-item',{'item-active':form.portraitInfoType === '标签属性分布'}]">
          <img src="@/assets/img/icon-group-table.png" alt="">
          <div class="itr">
            <p class="tit">标签属性分布</p>
            <p class="text">举例：案件属性选择【案发城市】，则可以分析画像案件群中各区县案件的数量分布情况</p>
          </div>
        </div>
        <div @click="form.portraitInfoType = '属性交叉分布'" :class="['info-type-item',{'item-active':form.portraitInfoType === '属性交叉分布'}]">
          <img src="@/assets/img/icon-bar-table.png" alt="">
          <div class="itr">
            <p class="tit">属性交叉分布</p>
            <p class="text">举例：案件属性选择【案发地址】和【侵害方式】则可以分析画像案件群中“酒店案发”中受害人自愿的比例</p>
          </div>
        </div>
      </div>
      <div class="title">设置画像信息</div>
      <el-form-item label="标签或属性：" prop="tagIdList" v-if="form.portraitInfoType === '标签属性分布'">
        <el-select
            ref="select1"
            clearable
            multiple
            v-model="form.tagIdList"
            placeholder="请选择"
            style="width: 286px"
        >
          <el-option :value="op.id" :label="op.tagViewName" v-for="(op,index) in tagList" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-row :gutter="20" v-else>
        <el-col :span="12">
          <el-form-item label="行属性：" prop="rowIdList">
            <el-select
                ref="select2"
                clearable
                v-model="form.rowIdList"
                placeholder="请选择"
                style="width: 100%"
            >
              <el-option :value="op.id" :label="op.tagViewName" v-for="(op,index) in tagList" :key="index"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="列属性：" prop="columnIdList">
            <el-select
                ref="select3"
                clearable
                v-model="form.columnIdList"
                placeholder="请选择"
                style="width: 100%"
            >
              <el-option :value="op.id" :label="op.tagViewName" v-for="(op,index) in tagList" :key="index"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="dialog-footer">
      <el-button @click="handleSubmit" :loading="btnLoading" size="small" class="btn plain-btn">确认</el-button>
      <el-button @click="closeForm('')" size="small" class="btn default-btn">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {sandbox} from '@/libs/util'
import drawer from '@/mixins/drawer.js'
export default {
  name: "ImageInfoDialog",
  mixins: [drawer],
  props:{
    visible: {
      type: Boolean,
      default: false,
    },
    portraitId: {
      type: String,
      default: '',
    },
    portraitType: {
      type: String,
      default: ''
    },
    caseGroupData: {
      type: Object,
      default: () => {}
    },
    mode: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      btnLoading:false,
      form: sandbox({
        tagIdList: [],
        rowIdList: [],
        columnIdList: [],
        // attrRuleIds: '',
        // dimension1Field: '',
        // dimension1FieldDesc: '',
        // dimension2Field: '',
        // dimension2FieldDesc: '',
        portraitId: '',
        portraitInfoType: '标签属性分布',
      }),
      rules: {
        tagIdList: [{required: true, message: '必填项', trigger: 'trigger'}],
        rowIdList: [{required: true, message: '必填项', trigger: 'trigger'}],
        columnIdList: [{required: true, message: '必填项', trigger: 'trigger'}],
      },
      selectList:[],
      tagList:[],
    }
  },
  methods: {
    AddRow(){
      let form = sandbox(this.form)
      if(form.portraitInfoType === '属性交叉分布'){
        form.rowIdList = [form.rowIdList]
        form.columnIdList = [form.columnIdList]
      }
      return this.$api.api_urcap_portraitInfo_add({
        body: form,
        config: {showMsg: true}
      })
    },
    UpdateRow(){
      let form = sandbox(this.form)
      if(form.portraitInfoType === '属性交叉分布'){
        form.rowIdList = [form.rowIdList]
        form.columnIdList = [form.columnIdList]
      }
      return this.$api.api_urcap_portraitInfo_add({
        body: form,
        config: {showMsg: true}
      })
    },
    edit(row){
      this.form = {
        tagIdList: row.info?.tagIdList || [],
        rowIdList: row.info?.rowIdList[0] || '',
        columnIdList: row.info?.columnIdList[0] || '',
        portraitId: row.info.portraitId,
        portraitInfoType: row.info.portraitInfoType,
      }
    },
    getSelectList(){
      this.$api.api_urcap_baseInfoAttrDict_queryList({
        body: {
          PageIndex: 1,
          PageSize: 1000,
          infoType:this.portraitType,
        },
      }).then(res => {
        this.selectList  =  res.data
      })
    },
    getTagList(){
      this.$api.api_urcap_suspectTag_queryList({
        body: {
          PageIndex: 1,
          PageSize: 1000,
          tagType:this.portraitType,
        },
      }).then(res => {
        this.tagList  =  res.data
      })
    },
  },
  created() {
    this.getSelectList()
    this.getTagList()
  }
}
</script>

<style scoped lang="scss">
.title{
  font-size: 16px;
  color: #333333;
  line-height: 22px;
  margin-bottom: 10px;
}
.info-type-box{
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
  .info-type-item{
    display: flex;
    align-items: center;
    width: calc(50% - 10px);
    height: 146px;
    padding: 25px;
    box-sizing: border-box;
    background: #FFFFFF;
    border-radius: 8px;
    border: 1px solid #DCE1E4;
    img{
      height: 80px;
      margin-right: 20px;
    }
    .itr{
      flex: 1;
      p{
        line-height: 1;
      }
      .tit{
        font-size: 14px;
        color: #333333;
      }
      .text{
        font-size: 12px;
        line-height: 22px;
        color: #666666;
      }
    }
  }

  .item-active{
    position: relative;
    border: 1px solid #2774F4;
    &:after{
      content: ' ';
      position: absolute;
      right: 0;
      bottom: 0;
      width: 44px;
      height: 44px;
      background: url("../../../assets/img/icon-xz.png");
    }
  }
}
</style>